<template>
<div id='index'>
    <mu-appbar class="topbar">
        <div class="logo" slot="left"></div>
        <div class="search" slot="default"> 
            <span class="mu-icon material-icons">search</span>
            <input type="text" placeholder="搜索" disabled="disabled">
        </div>
        <mu-flat-button label="登录" color="white" secondary slot="right" @click='op'/>
    </mu-appbar>
    <swiper :options="swiperOption" class="swiperlist">
        <swiper-slide v-for="(item,index) in playList" :key='index'><img :src="item" alt=""></swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>           
    </swiper>
    <div class="nav">
        <mu-flexbox wrap='wrap' justify="space-around" :gutter="0">
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/kind'>
                    <div class="navicon nomargin">
                    <img src="../assets/images/57d5407cN0d6adf20.png" alt="">
                    <p>驴友装备</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/'>
                    <div class="navicon nomargin">
                    <img src="../assets/images/57d54204N32b71c87.png" alt="">
                    <p>支付充值</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/'>
                    <div class="navicon nomargin">
                    <img src="../assets/images/57d54364Needc47cd.png" alt="">
                    <p>物流查询</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/'>
                    <div class="navicon nomargin">
                    <img src="../assets/images/57d9443eN68c52b40.png" alt="">
                    <p>车票查询</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/'>
                    <div class="navicon">
                    <img src="../assets/images/58cf20caN33e524c1.png" alt="">
                    <p>优惠卷领</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/phone'>
                    <div class="navicon">
                    <img src="../assets/images/phone.png" alt="">
                    <p>手机装备</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/'>
                    <div class="navicon">
                    <img src="../assets/images/57d53f16Nf3431cbd.png" alt="">
                    <p>驴友装备</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
            <mu-flexbox-item basis="25%" class="flex-demo">
                <router-link to='/'>
                    <div class="navicon">
                    <img src="../assets/images/57d543ebN25337ef2.png" alt="">
                    <p>我的喜欢</p>
                    </div>
                </router-link>
            </mu-flexbox-item>
        </mu-flexbox>
    </div>
    <div class="notice">
        <img src="../assets/images/logo3.png" alt="">
        <div class="lyric" >
            公告：
            <ul id='lyricUl'  style="transition: -webkit-transform 0.3s ease-out; transform-origin: 0px 0px 0px;" >
                <li v-for="(item,index) in notice" :key='index'>{{item.title}}</li>
            </ul>
        </div>
    </div>
    <div class="today">
        <div class="today-title">
            <p>今天特卖</p>
        </div>
        <div class="today-news " id='ul' ref="ab">
            <ul ref="abc" >
                <li v-for="(item,index) in today" :key='index'>
                <router-link to='/'>
                    <img :src="item.img" alt="">
                </router-link>
                    <p class='newtitle'>{{item.title}}</p>
                    <div class="goodsprice">
                        <div class="priceleft">
                            <span class="oldprice">现价：<i>{{item.price}}</i></span>
                            <span class="newprice">原价：<del>{{item.market_price}}</del></span>
                        </div>
                        <div class="tuan">立即参团</div>
                        
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="kong">
        <mu-flexbox wrap='wrap' justify="space-around" :gutter="0">
          <mu-flexbox-item basis="40%" class="item" v-for='(item,index) in playList' :key='index' >
            <router-link to='/' class="kankan">
              <img class="img-response" :src="item" >
            </router-link>
          </mu-flexbox-item>
        </mu-flexbox>
    </div>
</div>
</template>
<script>
    import { swiper, swiperSlide } from 'vue-awesome-swiper'
    import BScroll from 'better-scroll'
    import api from '../api/api.js'
    export default {
        data(){
            return{
                swiperOption: {
                    pagination: '.swiper-pagination',
                    paginationClickable: true, //点击完后可以继续滑动
                    autoplay:3000,
                    loop : true, //循环
                    autoplayDisableOnInteraction:false
                },
                playList:['src/assets/images/playlist0.jpg','src/assets/images/playlist1.jpg','src/assets/images/playlist2.jpg','src/assets/images/playlist3.jpg','src/assets/images/playlist4.jpg','src/assets/images/playlist5.jpg',],
                notice:[1,2,3,4,5,6],
                lyricUl:0,
                today:[],
            }
        },
        components:{
            swiper,
            swiperSlide
        },
        created(){
            
            this.$http.get(api.getnotice()).then((res)=>{
                this.notice=res.data.showapi_res_body.noticeList;
                this.iscoll();
            })
            this.$http.get(api.getlyday()).then((res)=>{
                this.today=res.data.showapi_res_body.list
                this.$refs["ab"].style.width=this.today.length*6.5+"rem";
                let scroll = new BScroll( this.$refs["ab"], {
                    startX: 0,
                    startY: 0,
                    scrollX:true,
                    momentum: true,
                    bounce: true,
                    snapThreshold:0.2,
                    deceleration: 0.001
                })
            })

            
        },
        methods:{
            iscoll(){
                var i=1;
                var lyricUl=document.getElementById('lyricUl');
                var vm =this;
                var lyricTime=setInterval(function(){
                    this.lyricUl=22*i;
                    lyricUl.style.transform = 'translate3d(0px,'+'-' +this.lyricUl +'px, 0px)';
                    i++;
                    if(i>vm.notice.length){
                        i=1;
                    }
                },4000)
            },
            op(){
                
            }
        },
        computed:{
            
        }
    }
</script>
<style lang="less" scoped>
ul{
    list-style: none;
}
*{
    margin: 0;
    padding: 0;
}
#index{
    background-color: #f5f5f5;
}
    .topbar{
        position: absolute;
        padding-left: 10px;
        width: 100%;
        top: 0;
        left: 0;
        z-index: 10;
        
        .logo{
            width: 80px;
            height: 48px;
            background: url("../assets/images/logo.png") no-repeat left center;
            background-size: cover;
        }
        .search{
            position: relative;
            font-family: '微软雅黑';
            input{
                font: initial;
                border: none;
                border-radius: 12px;
                padding-left: 1.6rem;
                margin-left: 0.65rem;
                width: 90%;
                background-color: #fff;
            }
            input:focus{
                outline:none;
            }
            span{
                position: absolute;
                top: 34%;
                left: 1.2rem;
                color: rgba(0, 0, 0, 0.3)
            }
        }
    }
    .nav{
        background-color: #f5f5f5;
        .navicon{
            margin-top: 5px;
            vertical-align: middle;
            text-align: center;
            img{
                width: 38px;
                height: 38px;
            }
            p{
                margin: 0;
                color: rgba(0, 0, 0, 0.7)
            }
        }
        
    }
    .notice{
        background-color: #f9f9f9;
        height: 55px;
        img{
            float: left;
            margin: 10px 0 0 10px;
        }
        .lyric{
                height: 22px;
                float: left;
                overflow: hidden;
                position: relative;
                top: 15px;
                left: 0;
                width: 11rem;
            ul{
                width: 9rem;
                position: absolute;
                top: 0;
                left: 55px;
                padding: 0;
                margin: 0;
                list-style: none;
                li{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 1;
                    height: 22px;
                    -webkit-box-orient: vertical;
                    text-align:justify;overflow: hidden;
                }
            }
        }
    }
    .swiperlist{
        margin-top: 56px;
        background-color: #f5f5f5;
    }
    .swiper-slide{
        img{
        width: 100%;
        height: 6.4rem;
        // background-size: cover;
        }
    }
    .today{
        .today-title{
            p{
                
            }
        }
        .today-news{
            ul{
                overflow: hidden;
                height: 9.1rem;
                li{
                    float: left;
                    width: 6.5rem;
                    img{
                        width: 6.4rem;
                    }
                }
            }
            
            .newtitle{
                font-size: 12px;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                height: 21px;
                -webkit-box-orient: vertical;
                text-align:justify;overflow: hidden;
            }
            .goodsprice{
                font-size: 12px;
                overflow: hidden;
                .priceleft{
                    float: left;
                    
                    span{
                        display: block;
                        i{
                            color: red;
                            font-style:normal;
                        }
                    }
                }
                .tuan{
                    float: right;
                    padding: 10px 10px 0 0 ;
                }
            }
            
        }
    }
    .kong{
        height: 100%;
        .kankan{
            img{
                width: 100%;
                height: 6.4rem;
            }
        }
    }
    
</style>